<template>
	<view>
		<fa-navbar title="收藏课程"></fa-navbar>
		<view class="content">
			<!-- 列表 -->
			<fa-course-item :courseList="courseList"></fa-course-item>
			<!-- 加载更多 -->
			<view class="u-p-30" v-if="courseList.length">
				<u-loadmore bg-color="#f4f6f8" fontSize="28" :status="status" />
			</view>
			<!-- 为空 -->
			<view class="u-m-t-60 u-p-t-60" v-if="is_empty">
				<u-empty text="暂无内容展示" textSize="28" mode="list"></u-empty>
			</view>
			<!-- 回到顶部 -->
			<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: lightColor }"></u-back-top>
			<!-- 底部导航 -->
			
			
		</view>
	</view>
</template>

<script>
	import { archives } from '@/common/fa.mixin.js';
	export default {
		mixins: [archives],
		computed: {},
		data() {
			return {
				page:1,
				has_more: true,
				is_empty:false,
				courseList:[],
			};
		},
		onLoad() {
			this.getCourseList()
		},
		
		
		onReachBottom() {
			if (this.has_more) {
				this.page += 1;
				this.getCourseList();
			}
		},
		methods:{
			getCourseList(){
				this.$api.getMyCourseCollect({params:{
						page:this.page,
						keyword:this.keyword,
						major_id:this.major_id,
						},
					}).then((res)=>{
					if(res.code){
						if (this.page === 1) {
							this.courseList = [];
						}
						let courseList = res.data.data
						let pageList = res.data
						this.has_more = pageList.current_page < pageList.last_page;
						this.courseList = [...this.courseList, ...courseList];
						this.is_empty = !this.courseList.length;
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 208rpx 24rpx 0 24rpx;
	}

</style>
